<template>
    <div>
<!--        搜索框-->
        <div class="xiaoqu">
            <div class="text1">
                回答名称:<input type="text" v-model="value01" style="height: 36px">
                用户名:<input type="text" v-model="value02" style="height: 36px">
                <el-button type="primary" @click="select">搜索</el-button>

            </div>
        </div>

        <div style="padding-top: 10px">
            <el-button type="primary" @click="dialogFormVisible = true">新增回答</el-button>
        </div>
        <!--增加弹框1-->
        <div>
            <el-dialog title="新增回答" :visible.sync="dialogFormVisible">
                <el-form :model="form" :label-width="formLabelWidth">
                    <el-form-item label="选择用户">
                        <!--                        选择用户信息-->
                        <el-select v-model="form.userName" placeholder="请选择" @change="handleChange">
                            <el-option
                                    v-for="item in usersList"
                                    :key="item.userId"
                                    :label="item.userName"
                                    :value="item.userId">
                            </el-option>
                        </el-select>

                    </el-form-item>
                    <el-form-item label="回答内容" :label-width="formLabelWidth">
                        <el-input v-model="form.answerContent" autocomplete="off"></el-input>
                    </el-form-item>
                    <!--                    <el-form-item label="手机号码" :label-width="formLabelWidth">-->
                    <!--                        <el-input v-model="form.phoneNumber" autocomplete="off"></el-input>-->
                    <!--                    </el-form-item>-->
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取 消</el-button>
                    <el-button type="primary" @click="adddate">确 定</el-button>
                </div>
            </el-dialog>
        </div>
        <!--        主页表格-->
        <el-table
                :data="xiaoquList"
                border
                style="width: 1200px"
                color:black
                :header-cell-style="{'background-color':'#409EFF',
color:'#fff'}">
            <el-table-column
                    fixed
                    prop="answerId"
                    label="ID"
                    width="150">
            </el-table-column>

            <el-table-column
                    prop="answerContent"
                    label="内容"
                    width="150">
            </el-table-column>
            <el-table-column
                    prop="users.userName"
                    label="用户名"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="users.phoneNumber"
                    label="用户手机"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="answerTime"
                    label="回答时间"
                    width="180">
            </el-table-column>
            <el-table-column

                    label="操作"
                    width="180">
                <template slot-scope="scope">
                    <el-button type="text" size="small" @click="handleClick(scope.row),xianshid4()">编辑信息</el-button>
                    <el-button type="text" size="small" @click="handleClick(scope.row),dialogFormVisible3 = true">删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <!--页码-->
        <div class="block">
            <el-pagination
                    layout="prev, pager, next"
                    :total="1">
            </el-pagination>
        </div>
        <!--      小谈框-->
        <div>
            <el-dialog title="是否删除" :visible.sync="dialogFormVisible3">
                <div slot="footer" class="dialog-footer">
                    <el-button @click="quxiaochuxian">取 消</el-button>
                    <el-button type="primary" @click="deletexinxi">确 定</el-button>
                </div>
            </el-dialog>
        </div>
        <!--   编辑弹框信息   --------------->
        <div>
            <el-dialog title="编辑回答" :visible.sync="dialogFormVisible4">
                <el-form :model="form1">
                    <!--                    <el-form-item label="用户名" :label-width="formLabelWidth" >-->
                    <!--                        <el-input v-model="form1.userName" autocomplete="off"></el-input>-->
                    <!--                    </el-form-item>-->
                    <el-form-item label="回答内容" :label-width="formLabelWidth">
                        <el-input v-model="form1.answerContent" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="手机号" :label-width="formLabelWidth">
                        <el-input v-model="form1.phoneNumber" autocomplete="off"></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogFormVisible4 = false">取 消</el-button>
                    <el-button type="primary" @click="updatexinxi">确 定</el-button>
                </div>
            </el-dialog>
        </div>
    </div>


</template>

<script>
    export default {
        name: "huida",
        data() {
            return {
                // 选择器数据
                // userName:"",
                // answerContent:"",
                // phoneNumber:"",
                obj: "",
                formLabelWidth: '120px',
                dialogFormVisible: false,
                xiaoquList: [],
                usersList: [],
                dialogFormVisible3: false,
                dialogFormVisible4: false,
                answerId: "",
                userId: "",
                // arr:[],
                value01:"",
                value02:"",
                form: {
                    userName: '',
                    answerContent: "",
                    phoneNumber: "",
                },
                form1: {
                    answerId: '',
                    userName: "",
                    answerContent: "",
                    phoneNumber: "",
                },
            }
        },
        created() {//默认请求全部商品
            // 调用查询用户方法
            this.searchUsers;
            console.log(this.value)

            this.axios.post("/wodehuida/answerAll", {
            }).then((res) => {
                this.xiaoquList = res.data.data;
                console.log(res.data);
                console.log(res.data.data);
            }).catch((err) => {
            });

            this.axios.post("/wodehuida/searchUser", {}).then((res1) => {
                this.usersList = res1.data.data;
                console.log("用户数据 ", res1.data.data);
            }).catch((err1) => {
                console.log(err1);

            });


        },
        methods: {
            //获取表格中的数据
            handleClick(row) {
                console.log(row);
                this.obj = row;
                this.answerId = row.answerId;
                this.userName = row.userName;
                this.answerContent = row.answerContent;
                this.phoneNumber = row.phoneNumber
                this.form1.userName = row.users.userName
                this.form1.answerContent = row.answerContent
                this.form1.phoneNumber = row.users.phoneNumber
                this.form1.answerId = row.answerId


                // console.log(this.answerId); 打印成功this.answerId
                console.log("obj", this.obj)
            },
            quxiaochuxian() {
                this.dialogFormVisible3 = false;
                alert("已成功取消删除");
                window.location.reload();
            },
            //      删除数据
            deletexinxi() {
                this.axios.post("/wodehuida/answerDelete", {
                    answerId: this.answerId
                }).then((res) => {
                    console.log(res.data);
                }).catch((err) => {

                });
                this.dialogFormVisible3 = false;
                alert("删除成功");
                window.location.reload(); //页面重新加载
            },
            //新增数据
            adddate() {
                this.axios.post("/wodehuida/addAnswer", {
                    userId: this.userId,
                    answerContent: this.form.answerContent,
                    // phoneNumber:this.form.phoneNumber,
                }).then((res) => {
                    console.log(res.data);

                }).catch((err) => {

                });
                // this.dialogFormVisible3 = false;
                alert("新增成功");

                this.dialogFormVisible = false;
                window.location.reload(); //页面重新加载

            },
            // 更改数据，编辑操作
            updatexinxi() {
                console.log(this.form1.userName);
                // 回答表的请求
                this.axios.post("/wodehuida/updateAnswers", {
                    answerId: this.answerId,
                    answerContent: this.form1.answerContent,
                    // phoneNumber:this.form.phoneNumber,
                }).then((res) => {
                    console.log(res.data);
                }).catch((err) => {

                });
                // 用户表的请求
                this.axios.post("/wodehuida/updateUsers", {
                    // answerContent:this.form.answerContent,
                    userName: this.form1.userName,
                    phoneNumber: this.form1.phoneNumber,
                }).then((res) => {
                    console.log(res.data);
                }).catch((err) => {

                });
                this.dialogFormVisible4 = false;
                window.location.reload(); //页面重新加载
            },
            xianshid4() {
                this.dialogFormVisible4 = true;
            },
            //获取select中的key属性
            handleChange(selectedValue) {
                // 当用户选择一个选项时，这个方法会被调用
                // selectedValue 是被选中的选项的 value，即 item.userId
                this.userId = selectedValue;
                console.log('Selected User ID:', selectedValue);
                console.log(this.userId);
            },
            select(){
                this.axios.post("/wodehuida/answerAll", {
                    userName:this.value02,
                    answerContent:this.value01,
                }).then((res) => {
                    this.xiaoquList = res.data.data;
                    console.log(res.data);
                    console.log(res.data.data);
                }).catch((err) => {
                });
            },
        }

    }
</script>

<style scoped>

</style>